<template>
  <div id="app">
    <TodoHeader @submit="parentSub" :list="list"/>
    <TodoMain @del="delListItem" :arr="showList" title="title"/>
    <TodoFooter @clearFn="clearFn" :type="type" @changeType="changeType" :arr="showList"/>
  </div>
</template>

<script>

// 引入样式
import './styles/base.css'
import './styles/index.css'

// 引入组件
import TodoFooter from "./components/TodoFooter";
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";


// 注册组件
export default {
  name: 'App',
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  computed: {
    // 返回需要展示的数据
    showList() {

      if (this.type === 'yes') {
        //  已经完成的
        return this.list.filter(item => item.isDone)
      }
      if (this.type === 'no') {
        //  已经完成的
        return this.list.filter(item => !item.isDone)
      }
      return this.list
    }
  },
  watch: {
    // list的值发生变化的时候，把最新的值存储到本地存储
    list: {
      deep: true, // 深度监听
      handler() {
        localStorage.setItem('list', JSON.stringify(this.list))
      }
    }
  },
  methods: {
    clearFn() {
      // 清除已经完成的事件 ==> 把未完成的事件放到新数组进行返回
      this.list = this.list.filter(item => !item.isDone)
    },
    changeType(type) {
      this.type = type;
    },
    // 父组件的添加事件
    parentSub(label) {
      let id = this.list.length === 0 ? 100 : this.list[this.list.length - 1].id + 1
      this.list.push({
        id,
        name: label,
        isDone: false
      })
    },
    delListItem(index) {
      //  index
      this.list.splice(index, 1);
    }
  },
  data() {
    return {
      type: 'all',
      // 默认从本地存储取数据
      list: JSON.parse(localStorage.getItem('list'))
    }
  },

  updated() {
    console.log('a')
  }
}
</script>

<style>
/*#app {*/
/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  text-align: center;*/
/*  color: #2c3e50;*/
/*  margin-top: 60px;*/
/*}*/
</style>
